<template>
	<view>
		<view id="videoplayer">
			<video id="video" @play="onPlay" @timeupdate="onTimeupdate" :src="video.video.play_url" :initial-time="player.initialTime" :page-gesture="true" playbackRate="1.25" controls style="width: 100%;"></video>
		</view>
		<view>
			<uni-section :title="video.title" titleFontSize="18px" padding="0 0 5px 10px"></uni-section>
		</view>
		<view class="view-line"></view>
		<view class="course-segmented">
			<uni-segmented-control :current="current" :values="items" styleType="text" activeColor="#FFD101" @clickItem="onClickItem" />
		</view>
		<view class="content">
			<view v-if="current === 0">
				<uni-list>
					<uni-list-item v-for="item in info.videos" :key="item.id" :title="item.title" :note="item.created_at+' | '+item.clicks+'次学习'" clickable @click="onVideo(item)" :thumb="file_url+item.lock"/>
				</uni-list>
			</view>
			<view v-if="current === 1">
				<uni-list>
					<uni-list-item v-for="item in info.informations" :key="item.id" :title="item.information.title" :note="item.information.click+'次学习'" clickable @click="onInformation(item)" :thumb="file_url+'/config-information.png'"/>
				</uni-list>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,
				video_id:0,
				file_url:'',
				video:{},
				form:{page:1},
				info:{banner:'',title:'',create_time:'',click_um:0,content:''},
				
				current: 0,
				items:['目录','资料'],
				
				player:{initialTime:0},
				course_study:[],
			}
		},
		onLoad(options){
			this.id = options.id
			this.video_id = options.video_id
			this.file_url = this.$func.fileUrl
			this.onGetInfo()
		},
		methods: {
			onPlay(){
				this.onStudy(this.video.id)
			},
			onTimeupdate(event){
				let currentTime = Math.ceil(event.detail.currentTime)
				//每三秒记录一次播放进度
				if(currentTime % 5  == 0){
					let obj = {course_id:this.id,video_id:this.video.id,currentTime:currentTime}
					let index = -1;
					this.course_study.forEach((e,i) => {
						if(e.course_id == obj.course_id && e.video_id == obj.video_id){
							e.currentTime = currentTime
							index = i
						}
					})
					if(index == -1){
						this.course_study.push(obj)
					}
					uni.setStorageSync('course_study',JSON.stringify(this.course_study));
				}
			},
			onGetInfo(){
				let _this = this
				this.$request_api('applet_api/course/info/'+_this.id,'POST',{}).then(res => {
					res.data.content = res.data.content.replace(/\<img/gi, '<img style="width:100%;height:auto"');
					_this.info = res.data
					_this.info.videos.forEach((e) => {
						if(e.id == _this.video_id){
							_this.video = e
						}
						
						e.lock = 'course/lock.png'
						if(_this.info.auth == true){
							e.lock = 'course/unlock.png'
						}else{
							e.lock = e.try_see == 1 ? 'course/unlock.png' : 'course/lock.png'
						}
					})
					
				}).catch(err => {
					console.log(err)
				})
			},
			onVideo(data){
				if(data.lock == 'course/lock.png'){
					uni.showToast({ title: '购买课程后可以观看', duration: 2000 }) 
					return
				}
				this.video = data
				//上次播放位置
				this.player.initialTime = 0
				let course_study = JSON.parse(uni.getStorageSync('course_study'))
				course_study.forEach((e) => {
					if(e.course_id == this.video.app_course_id && e.video_id == this.video.id){
						this.player.initialTime = e.currentTime
						console.log(e)
					}
				})
			},
			onStudy(id){
				let _this = this
				this.$request_api('applet_api/course/study','POST',{id:id}).then(res => {
					
				}).catch(err => {
					console.log(err)
				})
			},
			onInformation(data){
				uni.navigateTo({
					url: "/pages/information/info/index?id="+data.information_id
				});
			},
			onClickItem(e){
				this.current = e.currentIndex
			},
			onLink(url,id){
				uni.navigateTo({
					url: url+"?id="+id
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.content{padding: 15px 15px 100px 15px;}
.price{font-size: 1.6rem;color: red;}
.price text{color: #ccc;font-size: .9rem;display: inline; text-decoration: line-through; text-decoration-color: #CCC; text-decoration-thickness: 1px;}
.course-segmented{width: 300px;}
.fixed-bottom{background-color: #FFF;}

</style>
